<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img {
				/* 清除两行图片间竖直方向上的间距 */
				vertical-align: middle;
			}
			.hero {
				/*一个元素水平方向上占用的布局总空间*/
				margin-left: 10px;					/*左外间距*/
				border-left: 20px  solid  #00f;		/*左边框*/
				padding-left: 30px;					/*左内边距*/
				/* width */							/*内容宽度*/
				padding-right: 30px;				/*右内边距*/
				border-right: 20px  solid  #00f;	/*右边框*/
				margin-right: 10px;					/*右外间距*/
				
				margin-top: 10px;					/*上外间距*/
				border-top: 20px solid #00f;		/*上边框*/
				padding-top: 30px;					/*上内边距*/
				/* height */
				padding-bottom: 30px;				/*下内边距*/
				border-bottom: 20px solid #00f;		/*下边框*/
				margin-bottom: 10px;				/*下外间距*/
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg"><img src="img/4.jpg"><img class="hero" src="img/5.jpg"><img src="img/6.jpg"><img src="img/7.jpg"><img src="img/8.jpg"><img src="img/9.jpg">
	</body>
</html>
